<template>
  <div class="box">
    <h1>Child</h1>
    <hr>
    <slot name="one"></slot>
    <hr>
    <slot name="two"></slot>

    <hr>
    <li v-for="item in persons" :key="item.id">
      <!-- <p>{{item.name}}------{{item.age}}</p> -->
      <slot name="three" :item="item" :a="2" :b="3"></slot>
    </li>
    
      
      <!-- 父组件决定子组件插槽的内容，但是没有子组件的数据，所以通过slot传递数据到父组件 -->
     
    

  </div>
</template>

<script>
export default {
  name: "Child",
  props: ["persons"]

};
</script>

<style scoped>
.box {
  background: yellowgreen;
}
</style>
